<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>circle</title>
	<link rel="stylesheet" href="../css/demo.css">
</head>
<body>
	<div class="performance">
		<ul class="performance-list">
			<li class="performance-item">
				<h3 class="color-dark">洗衣机</h3>
				<div class="circle-area">
					<canvas id="one" class="circle" width="120" height="120" angle="0"></canvas>
					<div class="circle-content">
						<p class="label">差评率</p>
						<p class="rate">10.00%</p>
						<p class="improve">-0.6%</p>
					</div>
				</div>
				<ul class="performance-ul">
					<li>淘系销额：<span class="color-blue" style="font-size: 16px;">643.1</span>万<span class="color-red" style="margin-left: 5px;">(8.17%)</span></li>
					<li>京东指数：<span class="color-blue" style="font-size: 16px;">192.1</span><span class="color-red" style="margin-left: 5px;">(8.17%)</span></li>
				</ul>
			</li>
			<li class="performance-item">
				<h3 class="color-dark">抽油烟机</h3>
				<div class="circle-area">
					<canvas id="two" class="circle" width="120" height="120" angle="0.1"></canvas>
					<div class="circle-content">
						<p class="label">差评率</p>
						<p class="rate">10.00%</p>
						<p class="improve">-0.6%</p>
					</div>
				</div>
				<ul class="performance-ul">
					<li>淘系销额：<span class="color-blue" style="font-size: 16px;">643.1</span>万<span class="color-red" style="margin-left: 5px;">(8.17%)</span></li>
					<li>京东指数：<span class="color-blue" style="font-size: 16px;">192.1</span><span class="color-red" style="margin-left: 5px;">(8.17%)</span></li>
				</ul>			</li>
			<li class="performance-item">
				<h3 class="color-dark">空调</h3>
				<div class="circle-area">
					<canvas id="three" class="circle" width="120" height="120" angle="0.2"></canvas>
					<div class="circle-content">
						<p class="label">差评率</p>
						<p class="rate">10.00%</p>
						<p class="improve">-0.6%</p>
					</div>
				</div>
				<ul class="performance-ul">
					<li>淘系销额：<span class="color-blue" style="font-size: 16px;">643.1</span>万<span class="color-red" style="margin-left: 5px;">(8.17%)</span></li>
					<li>京东指数：<span class="color-blue" style="font-size: 16px;">192.1</span><span class="color-red" style="margin-left: 5px;">(8.17%)</span></li>
				</ul>			
			</li>
		</ul>
	</div>
	<div class="main-col" style="margin: 10px auto;">
		<table class="main-table">
			<thead>
				<th width="60">排行</th>
				<th width="140">店铺名称</th>
				<th width="140">月销额\环比</th>
				<th width="140">年销额\环比</th>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>美的官方旗舰店</td>
					<td><span class="">120</span>万 <span class="color-red">(10.00%)</span></td>
					<td><span class="">180</span>万 <span class="color-red">(10.00%)</span></td>
				</tr>
				<tr>
					<td>2</td>
					<td>美的官方旗舰店</td>
					<td><span class="">120</span>万 <span class="color-red">(10.00%)</span></td>
					<td><span class="">180</span>万 <span class="color-red">(10.00%)</span></td>
				</tr>
				<tr>
					<td>3</td>
					<td>美的官方旗舰店</td>
					<td><span class="">120</span>万 <span class="color-red">(10.00%)</span></td>
					<td><span class="">180</span>万 <span class="color-red">(10.00%)</span></td>
				</tr>

			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		init()
	})

	function init() {
		drawCircle({
			id: 'one',
			color: '#078dff',
			circleBg: '#eef2f9',
    		lineWidth: 10
		})
		drawCircle({
			id: 'two',
			color: '#10efc9',
			circleBg: '#eef2f9',
    		lineWidth: 10
		})
		drawCircle({
			id: 'three',
			color: '#fc6932',
			circleBg: '#eef2f9',
    		lineWidth: 10
		})
	}

	function drawCircle(_options) {
		var options = _options || {};
		options.angle = options.angle || 1;    //定义默认角度1为360度(角度范围 0-1);
	    options.color = options.color || '#fff';    //定义默认颜色（包括字体和边框颜色）;
	    options.circleBg = options.circleBg || '#eef2f9';
	    options.lineWidth = options.lineWidth || 10;    //定义默认圆描边的宽度;
	    options.lineCap = options.lineCap || 'square';
	    var box = document.getElementById(options.id);
	    options.angle = box.getAttribute('angle');
	    var center = box.width / 2;
	    var ctx = box.getContext('2d');
	    var begin = Math.PI / 2;
	    var end = Math.PI * 2;
	    var grd = ctx.createLinearGradient(0, 0, box.width, 0)
	    grd.addColorStop(1, options.circleBg);

	    ctx.lineCap = options.lineCap;
	    ctx.strokeStyle = options.color == 'grd' ? grd : options.color;
	    ctx.lineWidth = options.lineWidth;
	 
	    ctx.beginPath();    //设置起始路径，这段绘制360度背景;
	    ctx.strokeStyle = options.circleBg;
	    ctx.arc(center, center, (center - options.lineWidth), -begin, end, false);
	    ctx.stroke();

	    var imd = ctx.getImageData(0, 0, 240, 240);

	    function draw(current) {
	    	if (current <= 0) return
	    	console.log('aaa')
	    	ctx.putImageData(imd, 0 , 0)
	    	ctx.beginPath();
	    	ctx.strokeStyle = options.color === 'grd' ? grd : options.color;
	    	ctx.arc(center, center, (center - options.lineWidth), -begin, (end * current) - begin, false);
	    	ctx.stroke()
	    }
	    draw(options.angle)

	}
</script>
</html>